<template>
  <div id="PostView">
    <a-row>
      <a-col :span="15">
        <div style="width: 760px; margin-left: auto">
          <div
            style="
              display: flex;
              align-items: center;
              height: 120px;
              margin-top: 10px;
            "
          >
            <a-space :size="16">
              <div
                :class="{
                  'css-1tphb23-basicStyle-ImgWrapper': true,
                  'css-1tphb23-basicStyle-ImgWrapper-active': false,
                }"
              >
                求职面试
                <img
                  :src="require('@/assets/interview.b8d34858.png')"
                  :width="98"
                  style="margin-left: auto"
                  alt=""
                />
              </div>
              <div
                :class="{
                  'css-1tphb23-basicStyle-ImgWrapper': true,
                  'css-1tphb23-basicStyle-ImgWrapper-active': false,
                }"
              >
                职称与内推
                <img
                  :src="require('@/assets/jobs-promote.04e3a3ef.png')"
                  :width="98"
                  style="margin-left: auto"
                  alt=""
                />
              </div>
              <div
                :class="{
                  'css-1tphb23-basicStyle-ImgWrapper': true,
                  'css-1tphb23-basicStyle-ImgWrapper-active': false,
                }"
              >
                技术与交流
                <img
                  :src="require('@/assets/general-topic.66326b21.png')"
                  :width="98"
                  style="margin-left: auto"
                  alt=""
                />
              </div>
              <div>
                <a-space :direction="'vertical'" :size="12">
                  <div class="css-kv2vx8-basicStyle-ImgWrapper">
                    学习分享
                    <img
                      :src="require('@/assets/notes.0e1effb1.png')"
                      :width="40"
                      style="margin-left: auto"
                      alt=""
                    />
                  </div>
                  <div class="css-kv2vx8-basicStyle-ImgWrapper">
                    经验发聩
                    <img
                      :src="require('@/assets/feedback-active.c7f1ed71.png')"
                      :width="48"
                      style="margin-left: auto"
                      alt=""
                    />
                  </div>
                </a-space>
              </div>
            </a-space>
          </div>

          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <a-menu
              mode="horizontal"
              :default-selected-keys="['1']"
              style="margin-left: -40px; background-color: #f7f8fa"
              :style="{ width: `300px` }"
            >
            </a-menu>
            <div style="display: flex; margin-right: 5px">
              <a-button
                style="width: 100px"
                type="primary"
                status="success"
                shape="round"
                @click="toAddPost"
                >新建帖子
                <template #icon>
                  <icon-edit :size="18" />
                </template>
              </a-button>
            </div>
          </div>
          <a-space style="height: 50px">
            <a-tag
              :color="showTags.includes(item) ? '#165dff' : 'gray'"
              :checkable="true"
              :checked="true"
              @click="doTagCheck(item)"
              style="border-radius: 10px"
              v-for="(item, index) in searchTags"
              :key="index"
              ><span
                :style="{
                  color: showTags.includes(item) ? '#F7F8FA' : '#165dff',
                }"
                >{{ item }}
              </span></a-tag
            >
          </a-space>
          <a-list
            class="list-demo-action-layout"
            item-layout="horizontal"
            :bordered="false"
            :split="false"
            :data="dataList"
          >
            <template #item="{ item }">
              <div
                style="
                  background-color: #ffffff;
                  width: 750px;
                  height: 184px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin: 10px auto 15px;
                  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
                  border-radius: 10px;
                "
              >
                <a-list-item class="list-demo-item" action-layout="vertical">
                  <template #actions>
                    <span
                      class="action"
                      key="heart"
                      @click="onLikeChange(item.id)"
                      style="margin-left: 10px"
                    >
                      <span v-if="item.hasThumb == 1">
                        <IconHeartFill
                          :style="{ color: '#f53f3f' }"
                          size="15"
                        />
                      </span>
                      <span v-else>
                        <IconHeart size="15" />
                      </span>
                      {{ item.thumbNum }}
                    </span>
                    <span
                      class="action"
                      key="star"
                      @click="onStarChange(item.id)"
                    >
                      <span v-if="item.hasFavour == 1">
                        <IconStarFill
                          :style="{
                            color: '#ffb400',
                          }"
                          size="15"
                        />
                      </span>
                      <span v-else>
                        <IconStar size="15" />
                      </span>
                      {{ item.favourNum }}
                    </span>
                    <span class="action" @click="toPostPage(item.id)">
                      <span> <icon-eye size="15" />查看 </span>
                    </span>
                    <span class="action" @click="toPostEdit(item.id)">
                      <span> <icon-edit size="15" />编辑 </span>
                    </span>
                    <span
                      class="action"
                      @click="showConfirmDeleteModal(item.id)"
                    >
                      <span> <icon-delete size="15" />删除 </span>
                    </span>
                    <!-- 删除确认弹框 -->
                    <a-modal
                      title="确认删除帖子"
                      v-model:visible="confirmModalVisible"
                      @ok="handleDeletePost"
                      @cancel="cancelDeletePost"
                    >
                      <p>确定要删除该帖子吗？</p>
                    </a-modal>
                    <!--span class="action" key="reply">-->
                    <!--<IconMessage /> 评论-->
                    <!--</span>-->
                  </template>
                  <template #extra>
                    <div class="image-area" v-if="item.cover">
                      <img
                        alt="arco-design"
                        :src="item.cover"
                        style="
                          border-radius: 10px;
                          width: 100%;
                          height: 100%;
                          object-fit: cover;
                        "
                      />
                    </div>
                  </template>
                  <a-list-item-meta>
                    <template #title>
                      <h3 class="item-title" style="margin-top: -5px">
                        {{ item.title }}
                      </h3>
                    </template>
                    <template #description>
                      <a-space wrap align="start" class="item-tags">
                        <a-tag
                          v-for="(tag, index) of item.tagList"
                          :key="index"
                          :color="showTags.includes(tag) ? '#165dff' : 'gray'"
                          style="border-radius: 10px"
                        >
                          {{ tag }}
                        </a-tag>
                      </a-space>
                      <p class="item-description">{{ item.content }}</p>
                    </template>
                    <template #avatar>
                      <a-avatar
                        shape="square"
                        style="margin-left: 15px; margin-top: -60px"
                        :image-url="item.userVO?.userAvatar"
                      >
                      </a-avatar>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </div>
            </template>
            <template #empty>
              <div
                v-for="index in 20"
                :key="index"
                style="
                  background-color: #ffffff;
                  width: 750px;
                  height: 184px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin: 10px auto 15px;
                  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
                  border-radius: 10px;
                "
              >
                <a-skeleton :animation="true">
                  <div style="display: flex; width: 100%">
                    <a-skeleton-shape
                      style="margin-right: 10px; width: 45px; height: 42px"
                    />
                    <a-space
                      direction="vertical"
                      :style="{ width: '450px' }"
                      size="large"
                    >
                      <a-skeleton-line :rows="5" />
                    </a-space>
                    <a-skeleton-shape
                      style="margin-left: 20px; width: 200px; height: 160px"
                    />
                  </div>
                </a-skeleton>
              </div>
            </template>
          </a-list>
          <div style="height: 100px">
            <a-pagination
              :total="total"
              :base-size="5"
              :buffer-size="2"
              show-jumper
              show-page-size
              @change="onPageChange"
              @pageSizeChange="onPageSizeChange"
              :pageSizeOptions="customPageSizeOptions"
              :current="current"
              :page-size="pageSize"
              :page-item-style="{
                borderRadius: '5px',
                backgroundColor: '#F2F3F4',
              }"
              :active-page-item-style="{
                boxShadow: '0 1px 4px rgba(0, 0, 0, 0.2)',
                backgroundColor: '#FFFFFF',
                color: '#1a1a1a',
                borderRadius: '5px',
              }"
            >
              <template #page-item="{ page }"> {{ page }}</template>
              <template #page-item-step="{ type }">
                <icon-right
                  :style="
                    type === 'previous'
                      ? { transform: `rotate(180deg)` }
                      : undefined
                  "
                />
              </template>
              <template #page-item-ellipsis>
                <icon-more :stroke-width="5" />
              </template>
            </a-pagination>
          </div>
        </div>
      </a-col>
      <a-col :span="9">
        <div style="margin-left: 10px">
          <div style="margin-top: 20px; margin-bottom: 10px">
            <a-space :size="42">
              <a-space :direction="'vertical'" :size="1">
                <icon-star style="color: #87878c" :size="26" />
                <span style="font-size: 13px; color: #262626bf">收藏</span>
              </a-space>
              <a-space :direction="'vertical'" :size="1">
                <icon-notification style="color: #87878c" :size="26" />
                <span style="font-size: 13px; color: #262626bf">订阅</span>
              </a-space>
              <a-space :direction="'vertical'" :size="1">
                <icon-message style="color: #87878c" :size="26" />
                <span style="font-size: 13px; color: #262626bf">讨论</span>
              </a-space>
              <a-space :direction="'vertical'" :size="1">
                <icon-book style="color: #87878c" :size="26" />
                <span style="font-size: 13px; color: #262626bf">文章</span>
              </a-space>
            </a-space>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { useRoute, useRouter } from "vue-router";
import {
  PostControllerService,
  PostFavourControllerService,
  PostQueryRequest,
  PostThumbControllerService,
} from "../../../generated";

const route = useRoute();
const router = useRouter();
const confirmModalVisible = ref(false); // 控制确认删除弹框的显示与隐藏
let postIdToDelete: number | null = null; // 存储要删除的帖子的 ID

const showConfirmDeleteModal = (postId: number) => {
  postIdToDelete = postId; // 存储要删除的帖子的 ID
  confirmModalVisible.value = true; // 显示确认删除弹框
};

const cancelDeletePost = () => {
  confirmModalVisible.value = false; // 关闭确认删除弹框
};
// 设置每页的页数
const customPageSizeOptions = ref([10, 15, 20]);

// 根据标签搜索
const showTags = ref<string[]>([]);

const searchTags = [
  "Java",
  "面经",
  "面试经验",
  "求职求助",
  "C++",
  "校招",
  "C",
  "Python",
];

interface PostItem {
  id: number;
  title: string;
  content: string;
  cover: string;
  userId: number;
  tagList: string[];
  userAvatar: string;
  hasThumb: boolean;
  favourNum: number;
  hasFavour: boolean;
  thumbNum: number;
}

const current = ref<number>(parseInt(route.query.current as string) || 1);
const pageSize = ref<number>(parseInt(route.query.pageSize as string) || 15);

const searchParams = ref<PostQueryRequest>({
  searchText: "",
  pageSize: pageSize.value,
  current: current.value,
});

const dataList = ref<PostItem[]>([]);

const total = ref();

const loadData = async () => {
  const res = await PostControllerService.listPostVoByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败：" + res.message);
  }
};

/**
 * 监听 searchParams 变量，改变是触发页面的更新加载
 */
watchEffect(() => {
  searchParams.value = {
    ...searchParams.value,
    searchText: route.query.searchText,
  } as never;
  loadData();
});

/**
 * 页面加载时，请求数据
 */
// onMounted(() => {
//   loadData();
// });

const doTagCheck = (tag: string) => {
  searchParams.value = {
    ...searchParams.value,
  };
  if (!showTags.value.includes(tag)) {
    if (searchParams.value) {
      if (!searchParams.value.tags) {
        searchParams.value.tags = [];
      }

      showTags.value.push(tag);
      searchParams.value.tags.push(tag);
    }
  } else {
    if (searchParams.value) {
      if (!searchParams.value.tags) {
        searchParams.value.tags = [];
      }
      showTags.value = showTags.value.filter((t) => t !== tag);
      searchParams.value.tags = searchParams.value.tags.filter(
        (t) => t !== tag
      );
    }
  }
};
/**
 * 跳转到查看帖子页面
 * @param id
 */
const toPostPage = (id: string) => {
  console.log(id);
  router.push({
    path: `/view/post/${id}`,
  });
};
/**
 * 跳转到新增帖子
 */
const toAddPost = () => {
  router.push({
    path: `/add/post`,
  });
};
/**
 * 跳转到编辑帖子
 */
const toPostEdit = (id: string) => {
  router.push({
    path: "/update/post",
    query: {
      id: id,
    },
  });
};
/**
 * 删除帖子
 */
const handleDeletePost = async () => {
  const res = await PostControllerService.deletePostUsingPost({
    id: postIdToDelete,
  });
  if (res.code === 0) {
    message.success("删除成功！");
    await loadData();
  } else {
    message.error("删除失败：" + res.message);
  }
};
// 点爱心
const onLikeChange = async (postId: number) => {
  const res = await PostThumbControllerService.doPostThumbUsingPost({
    postId: postId,
  });
  if (res.code === 0) {
    const index = dataList.value.findIndex((item) => item.id === postId);
    if (index !== -1) {
      const post = dataList.value[index];
      post.thumbNum += res.data === 1 ? 1 : -1;
      post.hasThumb = res.data;
    }
  } else {
    message.error("点赞失败：" + res.message);
  }
};
/**
 * 收藏
 * @param postId
 */
const onStarChange = async (postId: number) => {
  const res = await PostFavourControllerService.doPostFavourUsingPost({
    postId: postId,
  });
  if (res.code === 0) {
    const index = dataList.value.findIndex((item) => item.id === postId);
    if (index !== -1) {
      const post = dataList.value[index];
      post.favourNum += res.data === 1 ? 1 : -1;
      post.hasFavour = res.data;
    }
  } else {
    message.error("收藏失败：" + res.message);
  }
};

// 切换当前页码
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
  current.value = page;
  router.push({
    query: searchParams.value,
  });
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
// 切换每页显示条数
const onPageSizeChange = (Size: number) => {
  searchParams.value = {
    ...searchParams.value,
    pageSize: Size,
  };
  pageSize.value = Size;
  router.push({
    query: searchParams.value,
  });
};
</script>

<style scoped>
#PostView {
  background-color: #f7f8fa;
}

.list-demo-action-layout {
}

.list-demo-action-layout .image-area {
  width: 190px;
  height: 150px;
  border-radius: 2px;
  overflow: hidden; /* 限制图片溢出容器 */
  margin-right: 18px;
  margin-top: 10px;
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}

.list-demo-item .item-title {
  text-align: left;
  font-weight: normal; /* 去掉加粗 */
  margin-bottom: 2px; /* 调整标题与描述之间的底部间距 */
}

.list-demo-item .item-description {
  max-width: 470px;
  height: 45px;
  text-align: left;
  margin-top: -2px; /* 调整上边距为负值 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* 最大显示行数 */
  line-clamp: 2; /* 最大显示行数 */
  color: #3c3c4399;
}

.item-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.list-demo-action-layout .arco-list-item {
  border-radius: 4px;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.action:hover {
  background: var(--color-fill-3);
}

.css-1tphb23-basicStyle-ImgWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 160px;
  height: 100%;
  border-radius: 8px;
  padding: 12px 0 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  background: white;
  color: #262626bf;
}

.css-1tphb23-basicStyle-ImgWrapper-active {
  color: white;
  background: linear-gradient(rgb(56, 151, 255), rgb(0, 122, 255));
}

.css-kv2vx8-basicStyle-ImgWrapper {
  color: #262626bf;
  width: 154px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  cursor: pointer;
  background: white;
  align-items: center;
  padding: 0 10px 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
</style>
